<template>
  <div class="tui-textarea-container">
    <textarea :id="id" :name="name" :value="modelValue" :placeholder="placeholder" :disabled="disabled"
      :required="required" :readonly="readonly" :maxlength="maxlength" :minlength="minlength" :rows="rows" :cols="cols"
      :wrap="wrap" class="tui-textarea" @input="handleInput" @focus="handleFocus" @blur="handleBlur"></textarea>
    <p v-if="errorMessage" class="tui-textarea-error">{{ errorMessage }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import type { PropType } from 'vue';

// 定义组件props
const props = defineProps({
  /**
   * 文本框的id
   */
  id: {
    type: String,
    default: '',
  },
  /**
   * 文本框的name属性
   */
  name: {
    type: String,
    default: '',
  },
  /**
   * 绑定的值
   */
  modelValue: {
    type: String,
    default: '',
  },
  /**
   * 占位符文本
   */
  placeholder: {
    type: String,
    default: '',
  },
  /**
   * 是否禁用
   */
  disabled: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否必填
   */
  required: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否只读
   */
  readonly: {
    type: Boolean,
    default: false,
  },
  /**
   * 最大长度
   */
  maxlength: {
    type: Number,
    default: undefined,
  },
  /**
   * 最小长度
   */
  minlength: {
    type: Number,
    default: undefined,
  },
  /**
   * 行数
   */
  rows: {
    type: Number,
    default: 4,
  },
  /**
   * 列数
   */
  cols: {
    type: Number,
    default: 50,
  },
  /**
   * 文本换行方式
   */
  wrap: {
    type: String,
    default: 'soft',
    validator: (value: string) => {
      return ['soft', 'hard', 'off'].includes(value);
    },
  },
  /**
   * 错误信息
   */
  errorMessage: {
    type: String,
    default: '',
  },
});

// 定义emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'focus', event: FocusEvent): void;
  (e: 'blur', event: FocusEvent): void;
  (e: 'input', event: Event): void;
}>();

// 处理输入事件
const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;
  const value = target.value;
  emit('update:modelValue', value);
  emit('input', event);
};

// 处理聚焦事件
const handleFocus = (event: FocusEvent) => {
  emit('focus', event);
};

// 处理失焦事件
const handleBlur = (event: FocusEvent) => {
  emit('blur', event);
};
</script>

<style scoped>
.tui-textarea-container {
  display: flex;
  align-items: center;
}

.tui-textarea-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.tui-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--tui-color-border-base);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s;
  resize: vertical;
}

.tui-textarea:focus {
  outline: none;
  border-color: var(--tui-color-primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.tui-textarea:disabled {
  background-color: var(--tui-color-bg-light);
  cursor: not-allowed;
}

.tui-textarea-error {
  color: var(--tui-color-danger);
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 0;
}
</style>